@model ProductDetailsModel
@using Nop.Core;
@using Nop.Core.Domain.Common;
@using Nop.Core.Domain.Catalog;
@using Nop.Core.Domain.Seo;
@using Nop.Core.Infrastructure;
@using Nop.Web;
@using Nop.Web.Models.Catalog;
@{
    Layout = "~/Views/Shared/_Layout.cshtml";

    //title, meta
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);

    var canonicalUrlsEnabled = EngineContext.Current.Resolve<SeoSettings>().CanonicalUrlsEnabled;
    if (canonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Request.Url.Scheme);
        Html.AddCanonicalUrlParts(productUrl);
    }
    int currentStoreId = Nop.Core.Domain.Stores.Store.AllStoreReservedId;
    if (Url.RequestContext.RouteData.Values.ContainsKey("storeId"))
    {
        currentStoreId = Convert.ToInt32(Url.RequestContext.RouteData.Values["storeId"].ToString());
    }
}


<!--product breadcrumb-->
@Html.Widget("productdetails_top")
@using (Html.BeginRouteForm("Product", new { SeName = Model.SeName }, FormMethod.Post, new { id = "product-details-form" }))
{
    @Html.Action("ProductBreadcrumb", "Catalog", new { productId = Model.Id })
                     
    <div class="sh-top-content grid">
        <div class="product-info-right">
            <h1 class="product-name underline">
                @Model.Name
            </h1>
            @if (Model.ProductVariantModels.Count > 1) 
            { 
                <div class="product-varient-action modified">
                <select id="product-variant-select" name="product-variant-select">
                    @foreach (var variant in Model.ProductVariantModels) 
                    {
                        <option value="@variant.Id">@variant.Name</option>
                    }
                </select>
                </div>
                <script>
                    $('#product-variant-select').change(function () {
                        var variantid = $(this).val();
                        $('div.product-variant-action').each(function () {
                            if ($(this).attr("data-id") == variantid) {
                                $(this).show();
                            } else {
                                $(this).hide();
                            }
                        });

                    });
                    
                    $(document).ready(function () {
                        $(".product-variant-action").hide();
                        $(".product-variant-action").eq($("#product-variant-select option").index($("#product-variant-select option:selected"))).show();
                    });
                </script>
            }
            <span class="product-info-store">Supplied by <a href="@Model.ProductStore.Url">@Model.ProductStore.Name @if (!String.IsNullOrEmpty(Model.ProductStore.StorePictureModel.ImageUrl)) { <img src="@Model.ProductStore.StorePictureModel.ImageUrl" alt="@Model.ProductStore.StorePictureModel.AlternateText" /> }</a></span>
            <div class="window-content content-clear">

                @if (Model.ProductVariantModels.Count > 1)
                {
                    <div class="product-variant-group">

                        @foreach (var variant in Model.ProductVariantModels)
                        {
                            <div class="product-variant-action" data-id="@variant.Id">
                                @{
                                    var dataDictVariant = new ViewDataDictionary();
                                    dataDictVariant.TemplateInfo.HtmlFieldPrefix = string.Format("variant_{0}", variant.Id);
                                    @Html.Partial("_ProductVariantLine", variant, dataDictVariant)
                                }
                            </div>
                        }
                    </div>
                }
                   
                <div class="content-clear"></div>
                @Html.Action("ProductSpecifications", "Catalog", new { productId = Model.Id })
            </div>
        </div>
        <div class="product-info-left">
            @Html.Widget("productdetails_before_pictures")
            <!--product pictures-->
            @Html.Partial("_ProductDetailsPictures", Model)
            @Html.Widget("productdetails_after_pictures")
        </div>
    </div>
    <div class="full-description">
        @Html.Raw(Model.FullDescription)
    </div>
    <div class="product-page-review clear-block">
        <h2 class="section-title">@T("Reviews.CustomerReviews")  @Html.Action("ProductReviewCount", "Catalog", new { productId = Model.Id })</h2>
        @Html.Action("ProductReviewOverview", "Catalog", new { productId = Model.Id })
    </div>
    <div class="product-page-shipping">
        @Html.Action("TopicBlock", "Topic", new { systemName = Model.ShippingReturnTopic })
    </div>
    <div class="content-clear"></div>
    <div class="product-collateral">
        @Html.Action("ProductsAlsoPurchased", "Catalog", new { productId = Model.Id })

        @Html.Action("RelatedProducts", "Catalog", new { productId = Model.Id })

        @Html.Action("RecentlyViewedProductsBlock", "Catalog", new { area = "Commerce" })
    </div>

}
@Html.Widget("productdetails_bottom")

